/*!
Bootstrap like flex layout
[important]: delete "col-auto" to avoid conflict with grid layout.
[important]: delete "row-cols-{n}" because of very few using.
In some cases, if you really want to use "col-auto", you should consider to use "flex-none"

<wrapper>:[require] d-flex
    behaviour: row-space-between / row-space-around / row-space-evenly / row-no-gap
    direction: [use flex classes]: flex-row / flex-column / flex-row-reverse / flex-column-reverse
    wrap: [use flex classes]: flex-wrap /flex-wrap-reverse / flex-nowrap
<item>:
    width: col-1~12 / col
    offset: col-offset-0~11
    order: [important: define flex-order here]: flex-order-1~12 / flex-order-none / flex-order-first / flex-order-last

[important: other flex properties will effect this layout]
 */
@mixin build-flex-layout($column, $gap) {
    %row {
        flex-direction: row;
        flex-wrap: wrap;
    }

    @include preload-responsive() using ($name, $width) {
        @include class-content("row-space-between", $name) {
            @extend %row;
        }
        @include class-content("row-space-around", $name) {
            @extend %row;
        }
        @include class-content("row-space-evenly", $name) {
            @extend %row;
        }
        @include class-content("row-no-gap", $name) {
            @extend %row;
        }
    }

    @include build-responsive() using ($name, $width) {
        //row
        @include class-content("row-space-between", $name) {
            margin: - $gap / 2;
            padding: 0;
            > [class*="col"] {
                width: 100%;
                padding: $gap / 2;
            }
        }
        @include class-content("row-space-around", $name) {
            margin: 0;
            padding: 0;
            > [class*="col"] {
                width: 100%;
                padding: $gap;
            }
        }
        @include class-content("row-space-evenly", $name) {
            margin: 0;
            padding: $gap / 2;
            > [class*="col"] {
                width: 100%;
                padding: $gap / 2;
            }
        }
        @include class-content("row-no-gap", $name) {
            margin: 0;
            padding: 0;
            > [class*="col"] {
                width: 100%;
                padding: 0;
            }
        }
        //col
        @for $i from 1 through $column {
            @include class-content("col-#{$i}", $name) {
                flex: 0 0 percentage($i / $column);
                max-width: percentage($i / $column);
            }
        }
        @include class-content("col", $name) {
            flex-basis: 0;
            flex-grow: 1;
            max-width: 100%;
        }
        //col-offset
        @for $i from 0 through ($column - 1) {
            @include class-content("col-offset-#{$i}", $name) {
                $num: $i / $column;
                margin-left: if($num == 0, 0, percentage($num));
            }
        }
        //col-order
        @for $i from 0 through $column {
            @include class-content("col-order-#{$i}", $name) {
                order: $i;
            }
        }
    }
}